<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<%@ include file="/common/taglibs.jsp" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>空调数据采集</title>
    <%@ include file="/common/util.jsp" %>


    <script src="${cdnctx}/dep/jquery/modernizr.js"></script>
    <script src="${cdnctx}/dep/jquery/spin.js"></script>
    <script type="text/javascript" src="${cdnctx }/src/collectdata/collectDataDetail.js"></script>
    <script type="text/javascript">
        errflag = false;


        //获取该节点的详细亮灯情况
        function showDetail(gatewayid, sensorid, channelid) {
            var startTime = $("#startTime").val();
            var endTime = $("#endTime").val();
            var startDate = dateutil.format(dateutil.parse(startTime), 'yyyy-mm-dd');
            var endDate = dateutil.format(dateutil.parse(endTime), 'yyyy-mm-dd');
            // var params = {
            //     "gatewayid" : gatewayid,
            //     "sensorid" : sensorid,
            //     "channelid" : channelid,
            //     "startTime" : startTime,
            //     "endTime" : endTime
            // }
            var params = "gatewayid=" + gatewayid + "&" + "sensorid=" + sensorid + "&" + "channelid=" + channelid + "&" + "startTime=" + startTime + "&" + "endTime=" + endTime;

            if (startDate == endDate) {
                art.dialog.open("${cdnctx}/economicBenefit/showDetail.shtml?" + params, {
                    width: 600,
                    height: 350,
                    title: "空调使用情况_" + gatewayid + "_" + sensorid + "_" + channelid,
                    cancel: true
                });
                // $("#baseApiModal").load("${cdnctx}/src/collectdata/collectDataDetail.html",         function() {
                //     // showCollectDataDetailTable(params);
                //     $("#showCollectDataDetailModal").modal("show").improveModalSize("860px", "440px").ModalMove();
                // });
            } else {
                alert("请输入同一天的开始、结束日期进行查询！");
            }
        }
        function jumpPage(pageIndex) {
            window.location.href = "${cdnctx}/economicBenefit/AirEconomicBenefitFth.shtml?" + $.param($("#aireconomicBenefitForm").serializeObject()) + "&pageIndex=" + pageIndex + "&companycode=${companycode }";
        }
        //是否显示图片的flag
        showflag = 0;

        function showMap(gatewayid, sensorid, channelid) {
            //获取图片名
            var fileName = "";
            var params = gatewayid + "," + sensorid + "," + channelid;
            $.ajax({
                type: 'POST',
                async: false,
                contentType: 'application/json',
                url: 'showPicture.shtml',
                data: params,
                dataType: 'json',
                //dataType : 'html',
                success: function (data) {
                    //alert(data.fileName);
                    fileName = data.fileName;
                },
                error: function (data) {
                    alert("failed");
                    //dialog_alert("页面过期，请重新登录！");
                }
            });
            //alert(fileName+"1");
            if (fileName == "" || fileName == null) {
                dialog_alert("未上传图片！");
                $("#showpic").hide();
                showflag = 0;
                return;
            }
            if (showflag == 0) {
                $("#smpic").attr("src", "/upload/" + fileName);
                $("#bgpic").attr("src", "/upload/" + fileName);
                $("#showpic").show();
                showflag = 1;
            } else {
                $("#showpic").hide();
                showflag = 0;
            }
        }

        function hide() {
            $("#showpic").hide();
            showflag = 0;
        }
        function sub() {
            var sensorid = $("#sensorid").val();
            if (!isNaN(sensorid) && sensorid.length < 5) {
                $("#aireconomicBenefitForm").submit();
            }
        }
    </script>
</head>
<body class="main">
<div class="-frame -style -luster" id="css_container">
    <!--首页框架页眉部分↓-->
    <%@ include file="/WEB-INF/pages/inc/header.jsp" %>
    <!--首页框架页眉部分↑-->

    <div class="content">

        <!-- Left导航菜单◎开始 -->
        <%@ include file="/WEB-INF/pages/inc/leftmenu.jsp" %>
        <!-- Left导航菜单◎结束 -->
        <div class="main-mid">
            <div class="pos">
                <img src="${cdnctx}/src/index/img/index.png"><a
                    href="${cdnctx}/system/customerinfo/customerList.shtml">客户管理 </a>><a
                    href="JavaScript:void(0);">${customername}_数据采集</a>
                <span style="float: right;margin-right: 25px;"><a
                        href="${cdnctx}/economicBenefit/airdevicestatus.shtml?companycode=${companycode }">设备状态</a></span>
            </div>
            <div class="css_contentDiv">
                <form id="aireconomicBenefitForm"
                      action="${cdnctx}/economicBenefit/AirEconomicBenefitFth.shtml" method="post">
                    <div style="padding:10px;">
                        <input type="hidden" name="companycode" value="${companycode }"/>
                        <label class="search_text">开始日期:</label>
                        <input id="startTime" class="search_input Wdate" type="text" name="startTime"
                               onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" value="${startTime }">
                        <label class="search_text">结束日期:</label>
                        <input id="endTime" class="search_input Wdate" type="text" name="endTime"
                               onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" value="${endTime }">
                        <label class="search_text">物联网关:</label>
                        <input type="text" class="search_input" id="gatewayid" name="gatewayid"
                               value="${collectAreaItem.gatewayid}">
                        <label class="search_text">采集设备节点:</label>
                        <input type="text" class="search_input" id="sensorid" name="sensorid"
                               value="${collectAreaItem.sensorid}">
                        <!-- <label class="search_text">通道ID:</label>
                        <input type="text" class="search_input"  id="channelid" name="channelid"> -->
                        <input type="button" class="search_btn" onclick="sub();" value="查&nbsp;询"/>
                        <input type="reset" class="reset_btn" value="重&nbsp;置"/>
                    </div>
                </form>

                <div class="divTable">

                    <div style="height:100%;background-color:white">
                        <table class="list_table">
                            <thead>
                            <tr>
                                <td>节点名称</td>
                                <td>物联网关</td>
                                <td>采集设备（节点）</td>
                                <td>采集区域（通道）</td>
                                <td id="tdblue">累积使用时间（h）</td>
                            </tr>
                            </thead>
                            <c:if test="${empty(airlistdata) }">
                                <tr class="even" style="color:red">
                                    <td colspan="10" class="no-data" style="height: 300px;"></td>
                                </tr>
                            </c:if>
                            <c:if test="${not empty(airlistdata) }">
                                <c:forEach items="${airlistdata}" var="entity" varStatus="status">
                                    <tr>
                                        <td id="gatewayid1" onclick="showMap(${entity.gatewayid},'','');"><u><a
                                                href="JavaScript:void(0);">${entity.gatewayid}</a></u></td>
                                        <td id="sensorid1">${entity.sensorid}</td>
                                        <td nowrap="nowrap"
                                            onclick="showMap(${entity.gatewayid},${entity.sensorid},${entity.channelid});">
                                            <u><a href="JavaScript:void(0);">${entity.collectareaname}(${entity.channelid})</a></u>
                                        </td>
                                        <td><u><a
                                                href="javascript:showDetail(${entity.gatewayid},${entity.sensorid},${entity.channelid});"><fmt:formatNumber
                                                value="${entity.useminute/60}" pattern="0.00"/></a></u></td>
                                    </tr>
                                </c:forEach>
                                <tr>
                                    <td colspan="3">小计:</td>
                                    <td>
                                        <fmt:formatNumber value="${pageuseminute/60}" pattern="0.00"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="3">总计:</td>
                                    <td><fmt:formatNumber value="${alluseminute/60}" pattern="0.00"/></td>
                                </tr>
                            </c:if>
                        </table>
                    </div>
                    <c:if test="${not empty(airlistdata) }">
                        <div id="pageInfo" class="pageJump">
                            <script type="text/javascript">
                                pagination.getPaginationHtml('JavaScript:jumpPage({0})', ${pageIndex}, ${pageCount}, 'pageInfo');
                            </script>
                            <c:if test="${!empty(airlistdata) }">
                                共有${dataCount}条数据
                            </c:if>
                        </div>
                    </c:if>
                </div>
            </div>
        </div>
    </div>
    <!--首页框架页尾部分↓-->
    <%@ include file="/WEB-INF/pages/inc/footer.jsp" %>
    <!--首页框架页尾部分↑-->
</div>
<script type="text/javascript">
    var outer = document.getElementById("outer");
    var inner = document.getElementById("inner");
    var aa = document.getElementById("aa");
    var imgs = document.getElementById("imgs");
    var x, y, n = false;
    // inner.onmousedown=test1;//如果把inner改为document,鼠标在窗口任意位置点击，图片都会跟随
    document.onmousemove = test2;//document如果改为outer,鼠标在outer内才起作用
    document.onmouseup = test3;
    function test1(event) {//鼠标按下时方法
        var event = event || window.event;//调试兼容,各个浏览器认识event有差别.
        n = true;//当n=true（n的值可随便设定）时，假定为鼠标按下的事件
        x = event.clientX - inner.offsetLeft;//鼠标在透明层的相对横坐标=鼠标坐标-方块左边距
        y = event.clientY - inner.offsetTop;//鼠标在透明层的相对纵坐标=鼠标坐标-方块上边距
    }
    function test2(event) {//鼠标移动时方法
        var event = event || window.event;
        if (n == true) {
            ////////鼠标移动范围
            inner.style.left = event.clientX - x + "px";
            inner.style.top = event.clientY - y + "px";
            //inner.style.top=400+"px";
            ////////图片移动范围
            imgs.style.left = -12 * parseInt(inner.style.left) + "px";
            imgs.style.top = -12 * parseInt(inner.style.top) + "px";
            ////////////////////////////限定鼠标移动的范围
            if (parseInt(inner.style.left) < 0) {
                inner.style.left = 0 + "px";
            }
            if (parseInt(inner.style.top) < 0) {
                inner.style.top = 0 + "px";
            }
            if (parseInt(inner.style.left) > outer.clientWidth - inner.clientWidth) {
                inner.style.left = outer.clientWidth - inner.clientWidth + "px";
            }
            if (parseInt(inner.style.top) > outer.clientHeight - inner.clientHeight) {
                inner.style.top = outer.clientHeight - inner.clientHeight + "px";
            }
            //////////////////////////////限定图片移动的范围
            if (parseInt(imgs.style.left) > 0) {
                imgs.style.left = 0 + "px";
            }
            if (parseInt(imgs.style.top) > 0) {
                imgs.style.top = 0 + "px";
            }
            if (parseInt(imgs.style.left) < -12 * (outer.clientWidth - inner.clientWidth)) {
                imgs.style.left = -12 * parseInt(outer.clientWidth - inner.clientWidth) + "px";
            }
            if (parseInt(imgs.style.top) < -12 * (outer.clientHeight - inner.clientHeight)) {
                imgs.style.top = -12 * parseInt(outer.clientHeight - inner.clientHeight) + "px";
            }
        }
    }
    function test3() {//鼠标松开时方法
        n = false;
    }
</script>
</body>
</html>
